<script setup>
	import BaseLayout from './components/slotlearn/BaseLayout.vue';
	import Card from './components/slotlearn/Card.vue';
	import SlotProp from './components/slotlearn/SlotProp.vue';
	import FancyList from './components/slotlearn/FancyList.vue';
	import MouseTracker from './components/slotlearn/MouseTracker.vue';
	import Child from './components/providelearn/Child.vue';
	import {
		provide,
		readonly,
		ref
	} from 'vue';
	import {
		provideMsgKey,
		updateLocationKey
	} from './constants';

	const message = ref('hello')
	provide(provideMsgKey, message)
	const location = ref('North')

	function updateLocation() {
		if (location.value == 'North')
			location.value = 'South'
		else
			location.value = 'North'
	}
	provide('read-only-location', readonly(location))
	provide(updateLocationKey, updateLocation)
</script>

<template>
	<BaseLayout>
		<template #header>
			<h1>Here might be a page title</h1>
		</template>

		<template #default>
			<p>A paragraph for the main content.</p>
			<p>And another one.</p>
		</template>

		<template #footer>
			<p>Here's some contact info</p>
		</template>
	</BaseLayout>
	<Card>
		<template #header="{text}">
			<h1>{{text}}</h1>
		</template>

		<template #default>
			<p>This is the content</p>
		</template>

		<template v-slot:footer><!-- #是v-slot的缩写 -->
			<em>This is the footer</em>
		</template>
	</Card>
	<SlotProp v-slot="slotProps">
		{{slotProps.text}}:{{slotProps.count}}
	</SlotProp>
	<SlotProp v-slot="{text,count}">
		{{text}}:{{count}}
	</SlotProp>

	<FancyList api-url="url" :per-page="10">
		<template #item="{ body, username, likes }">
			<div class="item">
				<p>{{ body }}</p>
				<p class="meta">by {{ username }} | {{ likes }} likes</p>
			</div>
		</template>
	</FancyList>

	<MouseTracker v-slot="{ x, y }">
		Mouse is at: {{ x }}, {{ y }}
	</MouseTracker>

	<br />
	<input v-model="message" class="input-bg" />
	<child></child>
</template>

<style scoped>
	.meta {
		font-size: 0.8em;
		color: #42b883;
	}

	.input-bg {
		border: 1px solid #5af;
	}
</style>